iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
2
Modern Web

以經典小遊戲為主題之ReactJS應用練習系列 第 1

Day01 - Tic Tac Toe篇:前言及功能構想

  • 分享至 

  • xImage
  •  

30天目標

今年受網友及朋友之邀,第一次參加iT邦幫忙鐵人賽,原本也是內心各種掙扎,但是想到電影”練習曲-單車環島日誌”說過的一句經典台詞「有些事,現在不做,就一輩子也不會做了。」所以決定來挑戰自己!
因為網路上真的很多厲害的網友及前輩大大們寫過ReactJS入門教學,透過這些文章真的讓我受益良多。但是在我入門ReactJS之後就一直很手癢,很想要多做一些應用練習,所以這次鐵人挑戰決定把題目訂在應用實作面,然後實作的主題是以經典小遊戲為主,主要目的是希望對於ReactJS入門之後,像我這樣的人,可以多練習多熟悉,分享的內容會以流程思考為主,然後也會分享我都用哪些工具或是Package,技術細節因為不是我這次想要分享的主軸,所以不會做很詳細的說明,但是我會盡量附上參考連結。


Tic Tac Toe篇 前言

對一個剛接觸ReactJS一年不到的我來說,很想要找一些有趣的題目來磨刀。想到小時候常玩的圈圈叉叉遊戲,回憶起童年種種的同時,忍不住手癢,很想要自己刻一個。但是圈圈叉叉遊戲在網路上隨便找都有,連在Google打圈圈叉叉後搜尋,都可以直接跳出遊戲,讓我還蠻驚訝的!所以為了做出一些小改變來增加趣味性,順便過年過節拿來騙騙小孩,決定來做一個伸縮自如的橡膠圈圈叉叉遊戲!

遊戲簡介

圈圈叉叉遊戲,又稱為井字棋。遊戲規則:
兩個玩家,一個打圈(◯),一個打叉(✗),輪流在3乘3的格上打自己的符號,最先以橫、直、斜連成一線則為勝。如果雙方都下得正確無誤,將得和局。
https://zh.wikipedia.org/wiki/井字棋

伸縮自如的圈圈叉叉遊戲 功能構想

我們這次要做的是伸縮自如的圈圈叉叉遊戲,所以我希望有下列功能:

  1. 棋盤大小可以按照玩家自己設定,例如3x3, 4x4, 5x5….,愛有多大,就有多大。
  2. 連成一直線的勝利條件可以自己設定,意思就是說,可以按自己心意設定連續3子獲勝,或是連續5子獲勝,直接變成五子棋!(雖然說五子棋好像都是下在棋盤的十字上,我們是下在空格裡,但是好像不會影響遊戲進行,所以這邊先忽略這些細節)。
  3. 我們需要一個判斷勝負的演算法,告訴我們是誰獲勝了,並且標示他獲勝棋子的連線。這邊的勝負演算法需要適應不同棋盤大小,以及不同勝利條件。
  4. 要有一個資訊顯示版,顯示目前輪到誰,以及顯示誰獲勝,或和局。
  5. 要有一個重新開始的按鈕。
  6. 可以切換成Single Play模式,也就是說身邊沒有朋友(哭...)的時候,可以自己跟電腦玩。不過因為我們這次不是以下棋演算法為主題,所以暫時用random演算法來讓電腦下棋。但是這邊會設計成演算法可以方便抽換,之後若有心要讓電腦變聰明,直接改演算法就可以了,不需要動到整個程式的架構。

預覽成果

講完構想之後,為了讓大家有實體感,並且相信上面的構想是真的做得到的,所以先來展示一下我們的成果,之後會朝向這個目標,逐步跟大家分享我的做法。

Demo


下一篇
Day02 - Tic Tac Toe篇:開發環境準備
系列文
以經典小遊戲為主題之ReactJS應用練習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言